<template>
  <a-modal
    :visible="visible"
    title="考试成绩"
    :width="900"
    :bodyStyle="{
      height: '500px',
      overflow: 'auto'
    }"
    @cancel="() => { $emit('cancel') }"
  >
    <detail-list :col="4">
      <detail-list-item term="开课院系">{{ detail.ksyxmc }}</detail-list-item>
      <detail-list-item term="课程名称">{{ detail.kcmc }}</detail-list-item>
      <detail-list-item term="考试年级">{{ detail.ksnjmc || detail.ksnj }}</detail-list-item>
      <detail-list-item term="考试学年">{{ detail.ksxnmc || detail.ksxn }}</detail-list-item>
      <detail-list-item term="考试学期">{{ detail.ksxqmc }}</detail-list-item>
      <detail-list-item term="考试性质">{{ detail.ksxzmc }}</detail-list-item>
      <detail-list-item term="考试类别">{{ detail.kslbmc }}</detail-list-item>
      <detail-list-item term="成绩类型">{{ detail.cjlxmc }}&nbsp;</detail-list-item>
      <detail-list-item term="考试日期">{{ detail.ksrq && detail.ksrq.format('YYYY-MM-DD') }}</detail-list-item>
      <detail-list-item term="录入成绩人数">{{ detail.insertNumber }}</detail-list-item>
    </detail-list>
    <a-table
      ref="table"
      :columns="columns"
      :dataSource="tableData"
      size="middle"
      :pagination="false"
      :scroll="{ y: 240 }"
    >
      <template slot='kscjSlot' slot-scope="text,record,index">
        <a-input :defaultValue="record.kscj" v-if="routeName === '课程成绩发布' && detail.cjlxm != '03'" v-model="record.kscj" @change="e=>kscjChange(e,record)" :key="record.id" />
        <span :style="{color:record.notPass ? 'red' : ''}" v-if="routeName !== '课程成绩发布' || detail.cjlxm == '03'">{{ record.kscj }}</span>
      </template>

      <template slot='note' slot-scope="text,record">
        <a-select :getPopupContainer="trigger => trigger.parentNode" v-if="routeName === '课程成绩发布'" allowClear style="min-width: 100px" v-model="record.note">
          <a-select-option v-for="i in TYPE0519" :key="i.id" :value="i.name">{{ i.name }}</a-select-option>
        </a-select>
        <span v-else>{{ record.note }}</span>
      </template>
    </a-table>
    <div slot="footer">
      <a-button @click="() => { $emit('cancel') }">关闭</a-button>
      <a-button v-if="routeName === '课程成绩发布' && detail.cjlxm != '03'" @click="handleSubmit" type="primary">保存</a-button>
    </div>
  </a-modal>
</template>


<script>

import { STable } from '~'
import { mapState } from 'vuex'
import DetailList from '~/tool/DetailList'
const DetailListItem = DetailList.Item

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  // props: ['visible'],
  components: {DetailList, DetailListItem, STable},
  data () {
    return {
      form: this.$form.createForm(this),
      columns: [
        {
          title: '学号',
          dataIndex: 'xsxh',
          width: '200px'
        },
        {
          title: '姓名',
          dataIndex: 'xm',
          width: '100px'
        },
        {
          title: '所属院系',
          dataIndex: 'ssyxmc',
          width: '150px'
        },
        {
          title: '所属专业',
          dataIndex: 'sszymc',
          width: '150px'
        },
        {
          title: '成绩',
          dataIndex: 'kscj',
          width: '70px',
          scopedSlots: { customRender: 'kscjSlot' }
        },
        {
          title: '备注',
          dataIndex: 'note',
          width: '100px',
          scopedSlots: { customRender: 'note' }
        }
      ],
      tableData: [],
      detail: {},
      updateData:[]
    }
  },
  computed: {
    routeName () {
      return this.$route.name
    },
    ...mapState({
      TYPE0519: state => state.app['TYPE0519'],
    })
  },
  mounted () {
    this.$store.dispatch('app/setDictionary', 'TYPE0519')
  },
  methods: {
    confirm () {
      if (!this.routeName.includes('审核')) {
        this.$emit('cancel')
      }
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        let apiFn = this.routeName === '培养办考试成绩审核' ? 'scorePybCheck' : 'scoreYxCheck'
        this.$api.cultivate[apiFn]({...values, id: this.detail.id}).then(res => {
          this.$message.success(res.msg)
          this.$emit('cancel')
          this.$emit('refresh')
        })
      })
    },
    getIntValue (value) {
      return parseInt(value);
    },
    kscjChange(e,record){
      // const {value=0} = e.target;
      // let _item = this.updateData.filter(item=>item['cjksxsmdId'] === record.id);
      // if(_item.length>0){
      //   _item[0]['score'] = value;
      // }else{
      //   this.updateData.push({cjksxsmdId:record.id,score:value});
      // }
    },
    handleSubmit(e,record){
      console.info(this.updateData)
      console.info(this.tableData)
      const hasInvalidRow = this.tableData.some(cj => {
        if (!String(cj.kscj) && !cj.note) {
          return true
        } else {
          return false
        }
      })
      if (hasInvalidRow) {
        this.$message.warn('请输入完整的成绩，成绩为空时备注必填')
      } else {
        // this.$api.cultivate['scoreDrcjUpdate']({updateList:this.tableData.map(item=>({cjksxsmdId:item['cjksxsmdId'],score:item['score']}))}).then(res => {
        this.$api.cultivate['scoreDrcjUpdate']({updateList:this.tableData.map(item=>({cjksxsmdId:item.id,score:item.kscj, note: item.note}))}).then(res => {
          this.$message.success(res.msg)
          this.$emit('refresh')
        });
      }

      console.info(e,record)
    }
  }
}
</script>

<style>

</style>
